<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/AdminLTE.css">
<link rel="stylesheet" href="css/admin.css">
<title>现场投票</title>


<style>
.vote-cover-img{
    width: 320px;
    height: 320px;
    margin-right: 15px;
    margin-left: 15px;
}
.vote-item-img{
    max-width: 100px;
}
</style>
<section class="content-header">
<h1>
    现场投票
</h1>
<ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-home"></i>首页</a></li>
    <li class="active">现场投票</li>
</ol>
</section>

<style type="text/css">

</style>
<div class="m-container">

<div class="m-container">
    <div class="row">
        <div class="col-md-12">
            <!-- start box -->
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title">上墙设置</h3>
                </div>
                <div class="box-body ">
                    <!-- start tabs -->
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                          <li class=""><a href="#tab_1" data-toggle="tab" aria-expanded="true">功能说明</a></li>
                          <li class="active"><a href="#tab_2" data-toggle="tab" aria-expanded="false">功能设置</a></li>
                          <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">添加项目</a></li>
                          <li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="false">投票项目</a></li>
                        </ul>

<!-- start tab-content -->
<div class="tab-content" style="min-height: 300px;">
    <div class="tab-pane" id="tab_1">
        <div style="padding: 20px;text-align: center;">
            <div style="border:solid 1px #f4f4f4;padding: 20px;border-radius: 3px;display: inline-block;">
            <p>通过大屏互动与微信的方式来进行现场投票，实时显示最新投票数据。</p>
            <p>
            <span class="status on">
                <i class="point"></i>
                开启
            </span>
            </p>
            <button class="btn btn-info">关闭功能</button>
            </div>
        </div>
    </div>



    <div class="tab-pane active" id="tab_2">
        <div class="config-group stripe">
            <div class="config-group-item">
                <div class="item-key">
                    <strong>规则说明</strong>
                </div>
                <div class="item-value">
                    <input type="text" class="item-input" placeholder="输入内容" value="每人每天仅限投票一次。每人可投总票数表示到截止时间可投的总票数。值为0时表示无限次，1表示1次，2表示2次...">
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>每人可以投票</strong>
                </div>
                <div class="item-value">
                    <input type="number" class="item-input" placeholder="每人可以投票">
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>投票截止时间</strong>
                </div>
                <div class="item-value">
                    <input type="date" value="2017-03-09 00:00" class="item-input" placeholder="时间" style="width:200px">
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>投票活动标题</strong>
                </div>
                <div class="item-value">
                    <input type="text" class="item-input" placeholder="投票活动标题">
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>投票海报</strong>
                </div>
                <div class="item-value">

                    <img src="img/photo4.jpg" alt="" class="vote-cover-img">
                    <label>
                    <input type="file" style="display: none;">
                    <div class="cover-upload-box">
                        <span class="upload-icon">
                            <i class="glyphicon glyphicon-open"></i>
                            上传海报图片
                        </span>
                    </div>
                    </label>
                    <p class="item-info">投票海报图片，建议尺寸 320像素 x 320像素</p>
                </div>
            </div>


            <div class="config-group-item">
                <div class="item-key">
                    
                </div>
                <div class="item-value">
                    <button class="btn btn-info">提交修改</button>
                </div>
            </div>
        </div>
    </div>


    <div class="tab-pane active" id="tab_3">
        <div class="config-group stripe">
            <div class="config-group-item">
                <div class="item-key">
                    <strong>投票项目名称</strong>
                </div>
                <div class="item-value">
                    <input type="text" class="item-input" placeholder="输入项目名称" value="">
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>投票项目描述</strong>
                </div>
                <div class="item-value">
                    <input type="text" class="item-input" placeholder="输入投票项目描述（限30字以内）" value="">
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>排序</strong>
                </div>
                <div class="item-value">
                    <input type="text" class="item-input" placeholder="输入顺序" value="">
                </div>
            </div>

            <div class="config-group-item">
                <div class="item-key">
                    <strong>投票截止时间</strong>
                </div>
                <div class="item-value">
                    <input type="date" value="2017-03-09 00:00" class="item-input" placeholder="时间" style="width:200px">
                </div>
            </div>

            <div class="config-group-item">
                <div class="item-key">
                    <strong>投票海报</strong>
                </div>
                <div class="item-value">
                    <label>
                    <input type="file" style="display: none;">
                    <div class="cover-upload-box">
                        <span class="upload-icon">
                            <i class="glyphicon glyphicon-open"></i>
                            投票项目的图片
                        </span>
                    </div>
                    </label>
                    <p class="item-info">投票海报图片，建议尺寸 320像素 x 320像素</p>
                </div>
            </div>


            <div class="config-group-item">
                <div class="item-key">
                    
                </div>
                <div class="item-value">
                    <button class="btn btn-info">提交修改</button>
                </div>
            </div>
        </div>
    </div>
    


    <div class="tab-pane" id="tab_4">

        <table class="wall-list fans-list table table-hover table-striped table-bordered">
            <thead>
                <tr>
                  <th>排序</th>           
                  <th>项目名称</th>
                  <th>已投票数</th>
                  <th>图像</th>
                  <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                  <td>1</td>
                  <td>xxx</td>
                  <td>123</td>
                  <td><img src="img/photo2.png" alt="" class="vote-item-img"></td>
                  <td>
                    <button class="btn btn-info btn-sm">编辑</button>
                    <button class="btn btn-danger btn-sm">删除</button>
                  </td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>xxx</td>
                  <td>123</td>
                  <td><img src="img/photo2.png" alt="" class="vote-item-img"></td>
                  <td>
                    <button class="btn btn-info btn-sm">编辑</button>
                    <button class="btn btn-danger btn-sm">删除</button>
                  </td>
                </tr>
            </tbody>
        </table>
        <div class="box-footer clearfix">
          <ul class="pagination pagination-sm no-margin pull-right">
            <li><a href="#">«</a></li>
            <li><a href="#">1</a></li>
            <li class="active"><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">»</a></li>
          </ul>
        </div>

    </div>


</div>
<!-- end tab-content -->

                    </div>
                    <!-- end tabs -->
                </div>
            </div>
            <!-- end box -->
        </div>
    </div>
</div>

</div>
<script src="js/jquery-2.2.3.min.js"></script>

<script src="../js/bootstrap.min.js"></script>
